{{extend 'layout.html'}}

<script type="text/javascript">
    $(function() {
            $("input#artist").autocomplete({
                source : {{=XML(response.json(artists))}},
                minLength: 2
            });

       $("form#new_album").submit(function() {
           if($("input#artist").val().trim() == "")
           {
              $("input#artist").next().append("Required");
              return false;
           }
           if($("input#album").val().trim() == "")
           {
              $("input#album").next().append("Required");
              return false;
           }
        });
    });
</script>
<form id="new_album" class="form-stacked" method="POST"
    action="/radio/staff/new_album">
    <fieldset>
        <legend>Enter New Album Information</legend> 

         <div class="clearfix">
            <label for="artist">Artist *</label>
                <div class="input">
                    <input class="xlarge" id="artist" name="artist" size="30"
                    type="text"> 
                    <span class="help-inline"></span>
                </div>
        </div>

        <div class="clearfix">
            <label for="album">Album Title *</label>
                <div class="input">
                    <input class="xlarge" id="album" name="album" size="30"
                    type="text">
                    <span class="help-inline"></span>
                </div>
        </div>

         <div class="clearfix">
            <label for="promoter">Promoter</label>
                <div class="input">
                    <input class="xlarge" id="promoter" name="promoter" size="30"
                    type="text">
                </div>
        </div>

       <div class="clearfix">
            <label for="genre">Genre</label>
                <div class="input">
                    <select name="genre" id="genre">
                        {{for genre in genres.items():}}
                        <option value="{{=genre[0]}}">{{=genre[1]}}</option>
                        {{pass}}
                    </select>
                </div>
        </div>

       <!-- not functional
        <div class="clearfix">
            <label for="submit">Attempt to Pull Songs Automatically</label>
                <div class="input">
                    <input class="btn" id="populate" name="populate" size="30"
                    type="submit" value="Go!">
                </div>
            </label>
        </div>Attempt to Pull Songs Automatically
        -->
         <div class="clearfix">
             <label for="songs">Song Titles (each separated by a new line)</label>
             <div class="input">
                 <textarea class="xxlarge" name="songs" id="songs"
                     rows=10></textarea>
             </div>
        </div> 

        <div class="clearfix">
            <label for="review_now">Submit</label>
                <div class="input">
                     <input class="btn primary" id="review_now" name="review_now" 
                     type="submit" value="Review Now">
                     <input class="btn" id="review_later" name="review_later" 
                     type="submit" value="Review Later">
               </div>
        </div>
   </fieldset>
</form>
